<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResourcesPortada.jsp" %>
<script src="<c:url value="/resources/js/portada/departaments/jquery.min.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/jquery.mCustomScrollbar.concat.min.js"/>"></script>
<link href="<c:url value="/resources/css/portada/department/jquery.mCustomScrollbar.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/portada/slider/style.css" />" rel="stylesheet">

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
<!-- Facebook Open Graph meta data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.imagenesgratis.com/tigger" />
<meta property="og:image" content="http://www.imagenesgratis.com/tigger/001.jpg" />
<meta property="og:description" content="Description Here" />

  <style>
	/*Para Scroll*/
	.links a,.demo_functions a{display:inline-block; padding:3px 15px; margin:7px 10px; background:rgba(255,255,255,0.15); text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
	code{color:#5b70ff;}
	.content form input{color:#eee; border:none; background:rgba(0,0,0,0.2); -webkit-border-radius:3px; -moz-border-radius:3px; /*color de input para llenar texto*/ border-radius:3px; margin-bottom:10px; padding:0 5px; height:25px; width:120px; -webkit-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); -moz-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4);}
	h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
	h2{font-family:Georgia,serif; font-size:18px; font-style:normal; color: #003a96;}
	
	h3{font-family:Georgia,serif; font-size:11px; font-style:italic; color:#666666;}
	h6{font-family:Georgia,serif; font-size:15px; font-style:italic; color:#003a96;}
	h4{font-family: Arial, Helvetica, sans-serif; font-size:14px; font-style:normal; color:#ffffff;}
	h5{font-family: Arial, Helvetica, sans-serif; font-size:12px; font-style:normal; color:#ffffff;}
	h7{font-size:11px; font-style:normal; color:#666666;}
	hr {border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:0;}
	.links{margin:10px;}
	.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
	.links a:hover{background:#eb3755; color:#fff;}
	/*Contenido de scroll tamaño */
	.content{margin:0 0 0px 0px; width:90%; height:480px; padding:10px; overflow:auto; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left;}
	.contentA{margin:0 0 0px 0px; width:90%; height:365px; padding:10px; overflow:auto; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left;}			
	#content_5{color:#333; background:#e9effd;}
	#content_5  p:nth-child(even){color:#666;}
	
	#content_6{color:#333; background:#e9effd;} /*Color de fondo del scroll*/
	#content_6 p:nth-child(even){color:#666;}
</style>

<style type="text/css">
.stpulldown-gradient
{
	background: #E1E1E1;
	background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
	background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
	color: #636363;
}
#stpulldown .stpulldown-logo
{
	height: 40px;
	width: 300px;
	margin-left: 20px;
	margin-top: 5px;
	background:url("http://sd.sharethis.com/disc/images/Logo_Area.png") no-repeat;
}
</style>
<script type="text/javascript">
		/*Para redireccionar el combo*/
		function url(uri) {
		location.href = uri;  }	
				
		(function($){
			$(window).load(function(){
				
				$("#content_5").mCustomScrollbar({
					scrollButtons:{
						enable:true
					},
					theme:"light-thick"
				});
				
				$("#content_6").mCustomScrollbar({
					scrollButtons:{
						enable:true
					},
					theme:"dark-thick"
				});
				
			});
		})(jQuery);
</script>

<script type="text/javascript">stLight.options({publisher: "15ee7716-0c7d-4401-8987-051496526cd2", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "15ee7716-0c7d-4401-8987-051496526cd2", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["facebook", "googleplus", "twitter", "email", "sharethis"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);
</script>

</head>

<body>
<c:set var="dept" value="${param._dept}"/> <!-- Recupera el get -->
<c:set var="arti" value="${param._arti}"/>
<c:set var="sect" value="${param._sect}"/>
	<div id="header">
		<div class="logindept">
			<label class="form_align35" style="color: #ffffff;">Departamento :</label>
			<select name="idCountry" id="idCountry" class="required form_input_align" title="Seleccione el Pais" onchange="url(this.value);">
					<option value=""><fmt:message key="form.selected"/></option>
					<c:forEach var="item" items="${comboDepartaments}">
						<c:set var="selec" value="" />
						<c:if test="${dept == item[0]}">
							<c:set var="selec" value="selected='selected'" />
						</c:if>
						<option value="homeDepartamemts.html?_dept=${item[0]}" ${selec}>${item[1]} - ${item[2]}</option>
					</c:forEach>
				</select> 
		</div>
		<ul id="menu">
			<li><a href="index.html">Página de Inicio </a></li>
			<li><a href="articlesDepartmentsAll.html?_dept=${dept}">Artículos de Interés</a></li>
		</ul>
	</div>
	<div id="wrapper">																																																																																		
		<div id="sidebar">
			<div class="logo_block">
				<a href="#"><img src="<c:url value="/resources/images/portada/logo.png" />" alt="setalpm" width="198"/></a><br />
				<div class="myInlineDiv"><h4>ARTÍCULOS DE INTERÉS<br/></h4>
				</div>
				<div id="content_6" class="contentA">
					<c:forEach var="item" items="${articulosActivos}">
                	<div class="lineDivArticle"><h5>${item.tittle}</h5></div>
                		<ul id="navigation">
	                	<c:forEach var="itemS" items="${listaOfSection}">
		                	<c:if test="${item.articleId == itemS.articleId.articleId}">
		                		<c:if test="${sect == itemS.sectionId}">
		                			<div class="DivArticleActive">
		                				<li><img src="<c:url value="/resources/images/portada/cubo.gif"/>" width="15" height="15"/> ${itemS.tittle}</li>
		                			</div>
		                		</c:if>
		                		<c:if test="${itemS.sectionId!=sect}">
									<li><a href="articlesSectiDepartament.html?_dept=4&_arti=${itemS.articleId.articleId}&_sect=${itemS.sectionId}"><img src="<c:url value="/resources/images/portada/cubo.gif"/>" width="15" height="15"/> ${itemS.tittle}</a></li>
				           		</c:if>
				            </c:if>
		                </c:forEach>
		                </ul><br/>
					</c:forEach>
	  			</div>
			</div>
		</div>
	
		<div id="content">
			<div>
					<c:choose>
						<c:when test="${sect=='0'}">
							<ul class="filterRef group"> 
								<li><a href="http://localhost:8080/farmasoft/index"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="18"/></a></li>
								<c:forEach var="itemM" items="${articulosActivos}">
									<c:if test="${arti == itemM.articleId}">
										<li><a href="homeDepartamemts.html?_dept=${dept}"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="15"/>${itemM.regionId.name}</a></li>
										<li><span>Artículos de Interés</span></li>
										<li><span>${itemM.tittle}</span></li>
									</c:if>
								</c:forEach>
							</ul>
						</c:when>
						<c:otherwise>
							<c:forEach var="itemP" items="${unaSeccion}">
								<ul class="filterRef group"> 
									<li><a href="http://localhost:8080/farmasoft/index"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="18"/></a></li>
									<li><a href="homeDepartamemts.html?_dept=${dept}"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="15"/>${itemP.articleId.regionId.name}</a></li>
									<li><span>Artículos de Interés</span></li>
									<li><span>${itemP.articleId.tittle}</span></li>
									<li><span>${itemP.tittle}</span></li>
								</ul>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</div>		
			<div class="bg">
				<div class="column1">
					<c:forEach var="item" items="${Departament}">
	                   <center><h2><span style="color: #003a96">${item[1]} - ${item[2]}</span></h2></center><br />
	                </c:forEach>
					<div id="content1">
					
						<center><h2><span style="color: #003a96">Artículos de Interés</span></h2></center><br />
						
						<div align="right"><img src="<c:url value="/resources/images/portada/print.png"/>" width="25" height="25"/></div><br/>
						
						<div id=”caja”>
							<!-- unaSeccion -->
							<c:forEach var="itemcaja" items="${unaSeccion}">
								<div><h6>${itemcaja.tittle}</h6></div>
								<c:choose>
									<c:when test="${itemcaja.image!=null}">
										<div id="marcoSectVist">
											<img src="<c:url value="/resources/images/portada/departamentos/seccion/${itemcaja.image}"/>" width="230px" height="200px"/>
										</div>
										<h7>${itemcaja.descriptions}</h7>
									</c:when>
									<c:otherwise>
										<h7>${itemcaja.descriptions}</h7>
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</div>				
					</div>

					<!-- AddThis Follow BEGIN -->
					<p>Follow Us</p>
					<div class="addthis_toolbox addthis_default_style">
					<a class="addthis_button_facebook_follow" addthis:userid="farmasoft.bo?fref=ts"></a>
					<a class="addthis_button_twitter_follow" addthis:userid="FarmaSoft"></a>
					<a class="addthis_button_google_follow" addthis:userid="u/0/108644159799526802396/posts"></a>
					<a class="addthis_button_youtube_follow" addthis:userid="FarmaSoftBolivia/channel"></a>
					<!-- a class="addthis_button_rss_follow" addthis:userid="leydi_taniac"></a-->
					</div>
					<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53611ebe66ea6183"></script>
					<!-- AddThis Follow END -->

				</div>
				<div class="column2">
					<!-- distintasSection -->
					<div align="right">
					<select name="idSection" id="idSection" class="required form_input_align" title="Seleccione un Artículo" onchange="url(this.value);">
						<option value=""><fmt:message key="form.selected"/></option>
						<c:forEach var="item" items="${articulosActivos}">
							<c:set var="selec" value="" />
							<c:if test="${arti == item.articleId}">
								<c:set var="selec" value="selected='selected'" />
							</c:if>
							<option value="articlesSectiDepartament.html?_dept=${dept}&_arti=${item.articleId}&_sect=0" ${selec}>${item.tittle}</option>
						</c:forEach>
						<option value="articlesDepartmentsAll.html?_dept=${dept}">Ver Todos</option>
					</select> <br/><br/>
					</div>
				
					<div id="content_5" class="content">
					<ul id="listSection">
						<c:forEach var="itemA" items="${sectionesActivas}">
							<c:if test="${sect == itemA.sectionId}">
								<c:choose>
									<c:when test="${itemA.image != null}">
										<li><div class="DivSectionActive"><div id="navigationS"><div class="marcoSecPeq"><img src="<c:url value="/resources/images/portada/departamentos/seccion/${itemA.image}"/>" width="45" height="40"/></div>${itemA.tittle}</div></div></li>
									</c:when>
									<c:otherwise>
										<li><div class="DivSectionActive"><div id="navigationS">${itemA.tittle}</div></div></li>
									</c:otherwise>
								</c:choose>
							</c:if>
							<c:if test="${itemA.sectionId!=sect}">
								<c:choose>
									<c:when test="${itemA.image != null}">
										<li><div id="navigationS"><a href="articlesSectiDepartament.html?_dept=${dept}&_arti=${itemA.articleId.articleId}&_sect=${itemA.sectionId}"><div class="marcoSecPeq"><img src="<c:url value="/resources/images/portada/departamentos/seccion/${itemA.image}"/>" width="45" height="40"/></div>${itemA.tittle}</a></div></li>
									</c:when>
									<c:otherwise>
										<li><div id="navigationS"><a href="articlesSectiDepartament.html?_dept=${dept}&_arti=${itemA.articleId.articleId}&_sect=${itemA.sectionId}">${itemA.tittle}</a></div></li>
									</c:otherwise>
								</c:choose>
							</c:if>
						</c:forEach>
					</ul>
	  				</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">																																																																																																																																																																																																									
		<ul>
			<li><a href="index.html">Página de Inicio</a>|</li>
			<li><a href="articlesDepartmentsAll.html?_dept=${dept}">Artículos de Interés</a></li>
		</ul>
		<p>UltraSoft Ltda.&copy; Soluciones Informáticas. <a href="https://www.facebook.com/farmasoft.bo" target="_blank" title="Best Free Templates">FarmaSoft</a>  </p>
	</div>
</body>

</html>

